<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:type="http://www.w3.org/1999/xhtml">
<head th:replace="layouts::header">
<body>
<nav th:replace="layouts::navbar"></nav>
<div class="container">
<h3>主面板</h3>
<p th:text="${versionNumber}"></p>
  <hr>

  <div class="row">
    <div class="col-md-6">
    <h4>当前项目</h4>
    <table class="table table-bordered table-striped">
      <thead class="thead-dark">
      <tr>
        <th>项目名称</th>
        <th>项目状态</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="aProject : ${projects}">
        <td th:text="${aProject.name}"></td>
        <td th:text="${aProject.stage}"></td>
      </tr>
      </tbody>
    </table>
  </div>
    <div class="col-md-4">
      <canvas id="myPieChart" height="50" width="50"></canvas>
      <script>
          let chartData="[[${projectStatusData}]]"
      </script>
  </div>
    </div>


<h4>当前学生</h4>
    <div class="row">
      <div class="col-md-6">
<table class="table table-bordered table-striped">
  <thead class="thead-dark">
  <tr>
    <th>
      学生姓名
    </th>
    <th>
      微信号
    </th>
    <th>项目个数</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="aStudent:${studentProjects}">
    <td th:text="${aStudent.name}"></td>
    <td th:text="${aStudent.wechatId}"></td>
    <td th:text="${aStudent.projectCount}"></td>
  </tr>
  </tbody>
</table>
</div>
    </div>


  </div>
<script type="text/javascript" th:src="@{js/myChart.js}"></script>
</body>
</html>